<template>
	<div>
		<div class="planing-header"></div>
		<table class="planing-body">
			<thead>
				<tr>
					<td>Mon</td>
					<td>Tue</td>
					<td>Web</td>
					<td>Thu</td>
					<td>Fri</td>
					<td>Sat</td>
					<td>Sun</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="dateList in CalendarData">
					<td v-for="date in dateList">{{date.date}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	export default {
	  name: 'Planing',
	  data () {
	    return {
	    	selectedDate:"",
	    	CalendarData:[],
	    }
	  },
	  created:function() {
	  	this.selectedDate = new Date();
	  },
	  methods:{
	  	getCalendarData:function(){
	  		var fristDateOfMonth = new Date(this.selectedDate.getFullYear(),this.selectedDate.getMonth(),1);
	  		var fristDateOfCalendar = new Date(fristDateOfMonth - fristDateOfMonth.getDay()*24*60*60*1000);
	  		this.CalendarData = []; 
	  		for(let i =0;i<6;i++){
	  			var dateListOfWeek = [];
	  			for(let j=0;j<7;j++){
	  				let date = {};
	  				let curDate = new Date(fristDateOfCalendar.getTime()+(i*7+j)*24*60*60*1000);
	  				date.date = curDate.getDate();
	  				if(curDate.getMonth!=this.selectedDate.getMonth()){
	  					date.isCurMonth = false;
	  				}else{
	  					date.isCurMonth = true;
	  				}
	  				dateListOfWeek.push(date);
	  			}
	  			this.CalendarData.push(dateListOfWeek);
	  		}
	  	},
	  },
	  watch:{
	  	selectedDate:function(val){
	  		this.getCalendarData();
	  	}
	  }
	}
</script>

<style scoped>
	
</style>